<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 590px;
            height: 470px;
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        
        .tu li {
            position: absolute;
            list-style: none;
            /* opacity: 0; */
        }
        
        .tiao {
            width: 200px;
            position: absolute;
            top: 430px;
            left: 20px;
            list-style: none;
        }
        
        .tiao li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgb(38, 0, 255);
            float: left;
            margin-left: 2px;
        }
        
        #left {
            position: absolute;
            width: 30px;
            height: 30px;
            left: 40px;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 3;
            background-color: rgb(92, 251, 43);
        }
        
        #right {
            position: absolute;
            width: 30px;
            height: 30px;
            right: -40px;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 3;
            background-color: rgb(92, 251, 43);
        }
    </style>
</head>

<body>
    <div class="one">
        <div id="left"></div>
        <div id="right"></div>
        <ul class="tu">
            <li><img src="./img/0.webp" alt=""></li>
            <li><img src="./img/1.webp" alt=""></li>
            <li><img src="./img/2.webp" alt=""></li>
            <li><img src="./img/3.webp" alt=""></li>
            <li><img src="./img/4.webp" alt=""></li>
            <li><img src="./img/5.webp" alt=""></li>
            <li><img src="./img/6.webp" alt=""></li>

        </ul>
        <ul class="tiao">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>
<script src="./jquery-3.4.1.min.js"></script>
<script>
    var cl = "red";
    var tuindex = 0;

    function lun() {

        if (tuindex > 6) {
            tuindex = 0
        }
        $(".tu li").css({
            opacity: function(i, v) {
                if (i == tuindex) {
                    $(".tiao li").css({
                        backgroundColor: function(i, v) {
                            if (i == tuindex) {
                                return cl;
                            } else {
                                return "rgb(38, 0, 255)"
                            }
                        }
                    })
                    return 1;


                } else {
                    return 0;
                }
            }
        })

        tuindex++;
        console.log(tuindex, "轮播");
    };
    lun();
    var temi = setInterval(lun, 2000)

    $(".tiao li").mouseenter(function() {
        // clearInterval(temi);
        var index = $(this).index();
        tuindex = index;
        $(this).css({
            backgroundColor: cl
        });
        $(this).siblings().css("backgroundColor", "rgb(38, 0, 255)")
        $(".tu li").css({
            opacity: function(i, v) {
                if (i == index) {
                    return 1;
                } else {
                    return 0;
                }
            }
        })
    })
    $("#left").click(function() {
        tuindex = tuindex - 2;
        if (tuindex < 0) {
            tuindex = 0
        }
        console.log(tuindex, "l");
        lun();
        // tuindex = tuindex + 1;
    });
    $("#right").click(function() {
        lun();
    });
</script>